<template>
  <div class="page-container">
    <!-- 页面头部 -->
    <PageHeader title="银行账户管理">
      <!-- 搜索和筛选区域 -->
      <template #search-filters>
        <div class="bank-account-search">
          <span class="label">搜索：</span>
          <el-input
            v-model="searchParams.search"
            placeholder="搜索银行账户名称、银行名称、银行账号"
            style="width: 300px"
            clearable
            @input="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>
        
        <div class="bank-name-select">
          <span class="label">银行名称：</span>
          <el-select
            v-model="searchParams.yhmc"
            placeholder="银行名称"
            clearable
            style="width: 150px"
            @change="handleSearch"
          >
            <el-option label="中国银行" value="中国银行" />
            <el-option label="工商银行" value="工商银行" />
            <el-option label="建设银行" value="建设银行" />
            <el-option label="农业银行" value="农业银行" />
            <el-option label="交通银行" value="交通银行" />
            <el-option label="招商银行" value="招商银行" />
            <el-option label="浦发银行" value="浦发银行" />
            <el-option label="中信银行" value="中信银行" />
            <el-option label="民生银行" value="民生银行" />
            <el-option label="兴业银行" value="兴业银行" />
            <el-option label="广发银行" value="广发银行" />
            <el-option label="平安银行" value="平安银行" />
            <el-option label="华夏银行" value="华夏银行" />
            <el-option label="光大银行" value="光大银行" />
            <el-option label="北京银行" value="北京银行" />
            <el-option label="上海银行" value="上海银行" />
            <el-option label="广州农商行" value="广州农商行" />
            <el-option label="其他" value="其他" />
          </el-select>
        </div>
        
        <div class="account-type-select">
          <span class="label">账户类型：</span>
          <el-select
            v-model="searchParams.zhlx"
            placeholder="账户类型"
            clearable
            style="width: 150px"
            @change="handleSearch"
          >
            <el-option label="基本账户" value="基本账户" />
            <el-option label="一般账户" value="一般账户" />
            <el-option label="专用账户" value="专用账户" />
            <el-option label="临时账户" value="临时账户" />
            <el-option label="储蓄账户" value="储蓄账户" />
            <el-option label="其他" value="其他" />
          </el-select>
        </div>
        
        <div class="account-status-select">
          <span class="label">账户状态：</span>
          <el-select
            v-model="searchParams.zt"
            placeholder="账户状态"
            clearable
            style="width: 150px"
            @change="handleSearch"
          >
            <el-option label="禁用" :value="0" />
            <el-option label="启用" :value="1" />
            <el-option label="未使用" :value="2" />
          </el-select>
        </div>
      </template>

      <!-- 主要操作按钮 -->
      <template #main-actions>
        <el-button type="primary" @click="handleAdd">
          <el-icon><Plus /></el-icon>
          新建银行账户
        </el-button>
      </template>

      <!-- 更多操作下拉菜单 -->
      <template #more-actions>
        <el-dropdown @command="handleMoreAction">
          <el-button type="info">
            <el-icon><More /></el-icon>
            更多
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="export">
                <el-tooltip content="导出当前筛选条件下的所有银行账户记录为Excel文件" placement="left">
                  <div style="display: flex; align-items: center; gap: 8px;">
                    <el-icon><Download /></el-icon>
                    导出Excel
                  </div>
                </el-tooltip>
              </el-dropdown-item>
              <el-dropdown-item command="columnConfig" icon="Setting">列配置</el-dropdown-item>
              <el-dropdown-item command="reset">重置筛选</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </PageHeader>

    <!-- 数据表格 -->
    <div class="table-container">
      <!-- 使用 BaseTable 组件 -->
      <BaseTable
        table-name="bankaccount"
        :columns="tableColumns"
        :data="state.pageData"
        :loading="state.loading"
        :sort="sort"
        @sort-change="handleSortChange"
      >
        <!-- 账户类型插槽 -->
        <template #zhlx="{ row }">
          <el-tag :type="getAccountTypeTag(row.zhlx)">
            {{ row.zhlx }}
          </el-tag>
        </template>
        
        <!-- 状态插槽 -->
        <template #zt="{ row }">
          <el-tag :type="getStatusTag(row.zt)">
            {{ getStatusText(row.zt) }}
          </el-tag>
        </template>
        
        <!-- 初始化金额插槽 -->
        <template #cshje="{ row }">
          <span class="amount-text">¥{{ formatNumber(row.cshje) }}</span>
        </template>
        
        <!-- 启用日期插槽 -->
        <template #qyrq="{ row }">
          <span class="date-text">{{ formatDate(row.qyrq) }}</span>
        </template>
        
        <!-- 创建时间插槽 -->
        <template #cjrq="{ row }">
          <span class="date-text">{{ formatDate(row.cjrq) }}</span>
        </template>
        
        <!-- 操作列插槽 -->
        <template #actions="{ row }">
          <div class="action-buttons">
            <el-button type="primary" size="small" @click="handleView(row)">
              <el-icon><View /></el-icon>
              查看
            </el-button>
            <el-button type="warning" size="small" @click="handleEdit(row)">
              <el-icon><Edit /></el-icon>
              编辑
            </el-button>
            <el-button type="danger" size="small" @click="handleDelete(row)">
              <el-icon><Delete /></el-icon>
              删除
            </el-button>
          </div>
        </template>
      </BaseTable>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="state.currentPage"
          v-model:page-size="state.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="state.totalItems"
          layout="total, sizes, prev, pager, next, jumper"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 新建/编辑银行账户对话框 -->
    <el-dialog 
      v-model="dialogVisible" 
      :title="dialogTitle" 
      width="800px"
      class="bankaccount-dialog"
    >
      <el-form 
        :model="formData" 
        :rules="formRules" 
        ref="formRef" 
        label-width="120px"
        class="bankaccount-form"
      >
        <!-- 基本信息 -->
        <div class="form-section">
          <div class="section-title">基本信息</div>
          <div class="form-row">
            <el-form-item label="银行账户名称" prop="yhzhmc">
              <el-input
                v-model="formData.yhzhmc"
                placeholder="请输入银行账户名称"
                maxlength="100"
                show-word-limit
                @blur="checkAccountName"
              />
            </el-form-item>
            <el-form-item label="银行名称" prop="yhmc">
              <el-select
                v-model="formData.yhmc"
                placeholder="请选择银行名称"
                style="width: 100%"
                filterable
                allow-create
              >
                <el-option label="中国银行" value="中国银行" />
                <el-option label="工商银行" value="工商银行" />
                <el-option label="建设银行" value="建设银行" />
                <el-option label="农业银行" value="农业银行" />
                <el-option label="交通银行" value="交通银行" />
                <el-option label="招商银行" value="招商银行" />
                <el-option label="浦发银行" value="浦发银行" />
                <el-option label="中信银行" value="中信银行" />
                <el-option label="民生银行" value="民生银行" />
                <el-option label="兴业银行" value="兴业银行" />
                <el-option label="广发银行" value="广发银行" />
                <el-option label="平安银行" value="平安银行" />
                <el-option label="华夏银行" value="华夏银行" />
                <el-option label="光大银行" value="光大银行" />
                <el-option label="北京银行" value="北京银行" />
                <el-option label="上海银行" value="上海银行" />
                <el-option label="广州农商行" value="广州农商行" />
                <el-option label="其他" value="其他" />
              </el-select>
            </el-form-item>
          </div>
          
          <div class="form-row">
            <el-form-item label="银行账号" prop="yhzhh">
              <el-input
                v-model="formData.yhzhh"
                placeholder="请输入银行账号"
                maxlength="50"
                show-word-limit
                @blur="checkAccountNumber"
              />
            </el-form-item>
            <el-form-item label="账户类型" prop="zhlx">
              <el-select
                v-model="formData.zhlx"
                placeholder="请选择账户类型"
                style="width: 100%"
              >
                <el-option label="基本账户" value="基本账户" />
                <el-option label="一般账户" value="一般账户" />
                <el-option label="专用账户" value="专用账户" />
                <el-option label="临时账户" value="临时账户" />
                <el-option label="储蓄账户" value="储蓄账户" />
                <el-option label="其他" value="其他" />
              </el-select>
            </el-form-item>
          </div>
          
          <div class="form-row">
            <el-form-item label="账户状态" prop="zt">
              <el-select
                v-model="formData.zt"
                placeholder="请选择账户状态"
                style="width: 100%"
              >
                <el-option label="禁用" :value="0" />
                <el-option label="启用" :value="1" />
                <el-option label="未使用" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="启用日期" prop="qyrq">
              <el-date-picker
                v-model="formData.qyrq"
                type="date"
                placeholder="请选择启用日期"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </div>
          
          <div class="form-row">
            <el-form-item label="初始化金额" prop="cshje">
              <el-input-number
                v-model="formData.cshje"
                placeholder="请输入初始化金额"
                style="width: 100%"
                :precision="2"
                :step="1000"
                :min="0"
                :max="999999999.99"
              />
            </el-form-item>
          </div>
        </div>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 查看详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="银行账户详情" width="600px" class="detail-dialog">
      <div class="detail-content" v-if="selectedAccount">
        <div class="detail-section">
          <h3>基本信息</h3>
          <div class="detail-grid">
            <div class="detail-item">
              <span class="label">银行账户名称:</span>
              <span class="value">{{ selectedAccount.yhzhmc }}</span>
            </div>
            <div class="detail-item">
              <span class="label">银行名称:</span>
              <span class="value">{{ selectedAccount.yhmc }}</span>
            </div>
            <div class="detail-item">
              <span class="label">银行账号:</span>
              <span class="value">{{ selectedAccount.yhzhh }}</span>
            </div>
            <div class="detail-item">
              <span class="label">账户类型:</span>
              <span class="value">
                <el-tag :type="getAccountTypeTag(selectedAccount.zhlx)">
                  {{ selectedAccount.zhlx }}
                </el-tag>
              </span>
            </div>
            <div class="detail-item">
              <span class="label">账户状态:</span>
              <span class="value">
                <el-tag :type="getStatusTag(selectedAccount.zt)">
                  {{ getStatusText(selectedAccount.zt) }}
                </el-tag>
              </span>
            </div>
            <div class="detail-item">
              <span class="label">启用日期:</span>
              <span class="value">{{ formatDate(selectedAccount.qyrq) }}</span>
            </div>
            <div class="detail-item">
              <span class="label">初始化金额:</span>
              <span class="value amount-text">¥{{ formatNumber(selectedAccount.cshje) }}</span>
            </div>
            <div class="detail-item">
              <span class="label">创建时间:</span>
              <span class="value">{{ formatDate(selectedAccount.cjrq) }}</span>
            </div>
            <div class="detail-item" v-if="selectedAccount.xgrq">
              <span class="label">修改时间:</span>
              <span class="value">{{ formatDate(selectedAccount.xgrq) }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 列配置对话框 -->
    <el-dialog v-model="columnConfigVisible" title="列配置" width="600px" class="column-config-dialog">
      <div class="column-config">
        <div class="column-list">
          <div v-for="column in tableColumns" :key="column.prop" class="column-item">
            <div class="column-info">
              <el-checkbox 
                v-model="column.visible" 
                :label="column.label"
                @change="handleColumnVisibilityChange"
              />
            </div>
            <div class="column-width" v-if="column.visible">
              <span class="width-label">宽度:</span>
              <el-input-number
                v-model="column.width"
                :min="80"
                :max="500"
                :step="10"
                size="small"
                style="width: 100px;"
                @change="handleColumnWidthChange"
              />
              <span class="unit">px</span>
            </div>
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="resetColumnConfig">重置</el-button>
          <el-button type="primary" @click="saveColumnConfig">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Plus, Search, ArrowDown, Edit, Delete, View, 
  Download, Refresh, Setting, More 
} from '@element-plus/icons-vue'
import BaseTable from '@/components/tools/BaseTable.vue'
import useTable from '@/composables/useTable.js'
import bankaccountApi from '@/api/bankaccountApi'
import PageHeader from '@/components/layout/PageHeader.vue'

// 使用通用表格组件
const { state, loadData, handleSortChange, updateSearchParams, handleSizeChange, handleCurrentChange } = useTable(bankaccountApi.getList)

// 搜索参数
const searchParams = reactive({
  search: '',
  yhmc: null,
  zhlx: null,
  zt: null
})

// 排序参数
const sort = ref({})

// 表格列配置 - 包含所有字段，默认显示主要字段
const tableColumns = ref([
  // 主要字段 - 默认显示
  { prop: 'yhzhmc', label: '银行账户名称', minWidth: 200, visible: true },
  { prop: 'yhmc', label: '银行名称', minWidth: 150, visible: true },
  { prop: 'yhzhh', label: '银行账号', minWidth: 180, visible: true },
  { prop: 'zhlx', label: '账户类型', minWidth: 120, visible: true, slot: 'zhlx' },
  { prop: 'zt', label: '状态', minWidth: 100, visible: true, slot: 'zt' },
  { prop: 'qyrq', label: '启用日期', minWidth: 120, visible: true, slot: 'qyrq' },
  { prop: 'cshje', label: '初始化金额', minWidth: 140, visible: true, slot: 'cshje' },
  { prop: 'cjrq', label: '创建时间', minWidth: 140, visible: false, slot: 'cjrq' },
  { prop: 'actions', label: '操作', minWidth: 200, visible: true, slot: 'actions', fixed: 'right' }
])

// 对话框相关
const dialogVisible = ref(false)
const detailDialogVisible = ref(false)
const columnConfigVisible = ref(false)
const dialogTitle = ref('')
const submitLoading = ref(false)
const formRef = ref(null)
const selectedAccount = ref(null)

// 表单数据
const formData = reactive({
  id: null,
  yhzhmc: '',
  yhmc: '',
  yhzhh: '',
  zhlx: '',
  zt: 1,
  qyrq: '',
  cshje: null
})

// 表单验证规则
const formRules = {
  yhzhmc: [
    { required: true, message: '请输入银行账户名称', trigger: 'blur' },
    { min: 2, max: 100, message: '银行账户名称长度在 2 到 100 个字符', trigger: 'blur' }
  ],
  yhmc: [
    { required: true, message: '请选择银行名称', trigger: 'change' }
  ],
  yhzhh: [
    { required: true, message: '请输入银行账号', trigger: 'blur' },
    { min: 10, max: 50, message: '银行账号长度在 10 到 50 个字符', trigger: 'blur' }
  ],
  zhlx: [
    { required: true, message: '请选择账户类型', trigger: 'change' }
  ],
  zt: [
    { required: true, message: '请选择账户状态', trigger: 'change' }
  ]
}

// 页面加载
onMounted(() => {
  console.log('银行账户管理页面加载')
  loadData()
})

// 搜索处理
const handleSearch = () => {
  updateSearchParams(searchParams)
  loadData()
}

// 重置搜索
const handleReset = () => {
  Object.assign(searchParams, {
    search: '',
    yhmc: null,
    zhlx: null,
    zt: null
  })
  handleSearch()
}

// 新增处理
const handleAdd = () => {
  dialogTitle.value = '新建银行账户'
  resetForm()
  dialogVisible.value = true
}

// 编辑处理
const handleEdit = (row) => {
  dialogTitle.value = '编辑银行账户'
  Object.assign(formData, row)
  dialogVisible.value = true
}

// 查看详情
const handleView = (row) => {
  selectedAccount.value = row
  detailDialogVisible.value = true
}

// 删除处理
const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm('确定要删除这个银行账户吗？', '确认删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await bankaccountApi.delete(row.id)
    ElMessage.success('删除成功')
    loadData()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
      ElMessage.error('删除失败')
    }
  }
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    submitLoading.value = true
    
    if (formData.id) {
      // 编辑
      await bankaccountApi.update(formData.id, formData)
      ElMessage.success('更新成功')
    } else {
      // 新增
      await bankaccountApi.create(formData)
      ElMessage.success('创建成功')
    }
    
    dialogVisible.value = false
    loadData()
  } catch (error) {
    console.error('提交失败:', error)
    ElMessage.error('操作失败')
  } finally {
    submitLoading.value = false
  }
}

// 重置表单
const resetForm = () => {
  Object.assign(formData, {
    id: null,
    yhzhmc: '',
    yhmc: '',
    yhzhh: '',
    zhlx: '',
    zt: 1,
    qyrq: '',
    cshje: null
  })
  if (formRef.value) {
    formRef.value.clearValidate()
  }
}

// 检查银行账户名称是否存在
const checkAccountName = async () => {
  if (!formData.yhzhmc || formData.yhzhmc.length < 2) return
  
  try {
    const response = await bankaccountApi.checkAccountName(formData.yhzhmc)
    if (response.exists && !formData.id) {
      ElMessage.warning('银行账户名称已存在')
    }
  } catch (error) {
    console.error('检查银行账户名称失败:', error)
  }
}

// 检查银行账号是否存在
const checkAccountNumber = async () => {
  if (!formData.yhzhh || formData.yhzhh.length < 10) return
  
  try {
    const response = await bankaccountApi.checkAccountNumber(formData.yhzhh)
    if (response.exists && !formData.id) {
      ElMessage.warning('银行账号已存在')
    }
  } catch (error) {
    console.error('检查银行账号失败:', error)
  }
}

// 更多操作处理
const handleMoreAction = (command) => {
  switch (command) {
    case 'export':
      handleExport()
      break
    case 'columnConfig':
      showColumnConfig()
      break
    case 'reset':
      handleReset()
      break
  }
}

// 导出Excel
const handleExport = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要导出银行账户列表吗？导出的Excel文件将包含所有符合条件的银行账户记录。',
      '确认导出',
      {
        confirmButtonText: '确定导出',
        cancelButtonText: '取消',
        type: 'info'
      }
    )
    
    const loadingMessage = ElMessage({
      message: '正在导出Excel文件，请稍候...',
      type: 'info',
      duration: 0,
      showClose: false
    })
    
    const exportParams = {}
    
    if (searchParams.search) {
      exportParams.search = searchParams.search
    }
    if (searchParams.yhmc !== null && searchParams.yhmc !== undefined) {
      exportParams.yhmc = searchParams.yhmc
    }
    if (searchParams.zhlx !== null && searchParams.zhlx !== undefined) {
      exportParams.zhlx = searchParams.zhlx
    }
    if (searchParams.zt !== null && searchParams.zt !== undefined) {
      exportParams.zt = searchParams.zt
    }
    
    console.log('导出参数:', exportParams)
    
    const response = await bankaccountApi.exportData(exportParams)
    
    // 创建下载链接
    const blob = new Blob([response.data], { 
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
    })
    const url = window.URL.createObjectURL(blob)
    const link = document.createElement('a')
    link.href = url
    link.download = `银行账户列表_${new Date().toISOString().slice(0, 10)}.xlsx`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    window.URL.revokeObjectURL(url)
    
    loadingMessage.close()
    ElMessage.success('导出成功')
  } catch (error) {
    if (error !== 'cancel') {
      console.error('导出失败:', error)
      ElMessage.error('导出失败')
    }
  }
}

// 列配置相关函数
const showColumnConfig = () => {
  columnConfigVisible.value = true
}

const handleColumnVisibilityChange = () => {
  console.log('列可见性变化 - tableColumns:', tableColumns.value)
  nextTick(() => {
    // 触发表格重新渲染
  })
}

const handleColumnWidthChange = () => {
  nextTick(() => {
    // 触发表格重新渲染
  })
}

const resetColumnConfig = () => {
  // 重置列配置到默认状态
  tableColumns.value.forEach(column => {
    if (['yhzhmc', 'yhmc', 'yhzhh', 'zhlx', 'zt', 'qyrq', 'cshje', 'actions'].includes(column.prop)) {
      column.visible = true
    } else {
      column.visible = false
    }
    column.width = column.minWidth || 120
  })
}

const saveColumnConfig = () => {
  // 保存列配置到本地存储
  localStorage.setItem('bankaccount-table-columns', JSON.stringify(tableColumns.value))
  ElMessage.success('列配置已保存')
  columnConfigVisible.value = false
}

// 工具函数
const getAccountTypeTag = (type) => {
  const tagMap = {
    '基本账户': 'primary',
    '一般账户': 'success',
    '专用账户': 'warning',
    '临时账户': 'info',
    '储蓄账户': 'danger',
    '其他': 'default'
  }
  return tagMap[type] || 'default'
}

const getStatusTag = (status) => {
  const tagMap = {
    0: 'danger',   // 禁用
    1: 'success',  // 启用
    2: 'info'      // 未使用
  }
  return tagMap[status] || 'default'
}

const getStatusText = (status) => {
  const textMap = {
    0: '禁用',
    1: '启用',
    2: '未使用'
  }
  return textMap[status] || '未知'
}

const formatNumber = (value) => {
  if (value === null || value === undefined) return '0.00'
  return Number(value).toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })
}

const formatDate = (date) => {
  if (!date) return '-'
  return new Date(date).toLocaleDateString('zh-CN')
}

// 加载列配置
const loadColumnConfig = () => {
  try {
    const savedColumns = localStorage.getItem('bankaccount-table-columns')
    if (savedColumns) {
      const parsedColumns = JSON.parse(savedColumns)
      tableColumns.value = parsedColumns
    }
  } catch (error) {
    console.error('加载列配置失败:', error)
  }
}

// 初始化时加载列配置
loadColumnConfig()
</script>

<style scoped>
/* 页面容器 */
.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--page-background, #f5f5f5);
}

/* 搜索筛选样式 */
.bank-account-search,
.bank-name-select,
.account-type-select,
.account-status-select {
  display: flex;
  align-items: center;
  gap: 8px;
}

.label {
  font-size: 14px;
  color: var(--text-secondary, #606266);
  white-space: nowrap;
}

/* 表格容器 */
.table-container {
  flex: 1;
  margin: 0 20px 20px;
  background: var(--content-background, white);
  border-radius: 8px;
  box-shadow: var(--shadow-light, 0 2px 8px rgba(0, 0, 0, 0.1));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 表格样式 */
:deep(.el-table) {
  border-radius: 8px;
  overflow: visible;
}

:deep(.el-table th) {
  background: var(--table-header-background, #fafafa);
  color: var(--text-primary, #303133);
  font-weight: 600;
}

:deep(.el-table td) {
  border-bottom: 1px solid var(--border-light, #ebeef5);
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background: var(--table-stripe-background, #fafafa);
}

/* 表格内容样式 */
.amount-text {
  font-weight: 500;
  color: var(--text-primary, #303133);
}

.date-text {
  color: var(--text-secondary, #606266);
}

/* 分页器样式 */
.pagination-wrapper {
  padding: 20px;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #e4e7ed;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
  margin-top: 10px;
  border-radius: 0 0 8px 8px;
}

/* 对话框样式 */
.bankaccount-dialog {
  border-radius: 8px;
}

.bankaccount-form {
  padding: 20px 0;
}

.form-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #303133);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-color, #409eff);
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
}

.form-row .el-form-item {
  flex: 1;
  margin-bottom: 0;
}

/* 详情对话框样式 */
.detail-dialog {
  border-radius: 8px;
}

.detail-content {
  padding: 20px 0;
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #303133);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--primary-color, #409eff);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.detail-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: var(--background-light, #fafafa);
  border-radius: 6px;
  border: 1px solid var(--border-light, #e4e7ed);
}

.detail-item .label {
  font-weight: 600;
  color: var(--text-primary, #303133);
  min-width: 120px;
  margin-right: 12px;
}

.detail-item .value {
  color: var(--text-secondary, #606266);
  flex: 1;
}

/* 列配置对话框样式 */
.column-config-dialog {
  border-radius: 8px;
}

.column-config {
  padding: 20px 0;
}

.column-list {
  max-height: 400px;
  overflow-y: auto;
}

.column-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--border-light, #e4e7ed);
}

.column-item:last-child {
  border-bottom: none;
}

.column-info {
  flex: 1;
}

.column-width {
  display: flex;
  align-items: center;
  gap: 8px;
}

.width-label {
  font-size: 14px;
  color: var(--text-secondary, #606266);
}

.unit {
  font-size: 14px;
  color: var(--text-secondary, #606266);
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .search-area {
    width: 100%;
    justify-content: flex-start;
  }
  
  .action-area {
    width: 100%;
    justify-content: flex-start;
  }
  
  .form-row {
    flex-direction: column;
    gap: 16px;
  }
  
  .detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .page-header {
    margin: 10px;
    padding: 16px;
  }
  
  .table-container {
    margin: 0 10px 10px;
  }
  
  .search-area {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-area .el-input,
  .search-area .el-select {
    width: 100%;
  }
  
  .action-buttons {
    justify-content: center;
  }
  
  .pagination-wrapper {
    padding: 15px 10px;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 20px;
  }
  
  .action-buttons {
    flex-direction: column;
    width: 100%;
  }
  
  .action-buttons .el-button {
    width: 100%;
    justify-content: center;
  }
}
</style> 